<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AK JOB</title>
    <link rel="icon" type="image/x-icon" href="../../../layuiadmin/style/res/favicon.png"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
    <style>
        .menu-tree {
            width: 30%;
        }

        .menu-form {
            display: block;
            position: absolute;
            left: 35%;
            width: 60%;
            top: 15px;
            background-color: #ffffff;
        }
    </style>
</head>
<body>

<div class="layui-fluid">
    <!--树形菜单-->
    <div class="layui-card menu-tree">
        <div class="layui-card-header">
            <button id="addCustomMenu" class="layui-btn layuiadmin-btn-admin layui-btn-sm">新建自定义菜单
            </button>
        </div>
        <div class="layui-card-body">
            <div class="" id="menuTree"></div>

        </div>
    </div>
    <!--表单-->
    <!--<div class="info-form layui-card menu-form" id="menuFormWrap" style="display: none;">-->

    <!--</div>-->

    <div class="layui-tab menu-form layui-tab-card menu-tab" id="featureMenuBox" style="display: none;">
        <ul class="layui-tab-title">
            <li class="layui-this">功能配置</li>
            <li>菜单信息</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div id="transferBox"></div>
                <div style="margin-top: 20px;">
                    <button style="width: 100%" class="layui-btn layui-btn-normal layui-btn-sm" id="updateFeature">
                        保存配置
                    </button>
                </div>
            </div>

            <div class="layui-tab-item">
                <div class="info-form" id="menuFormWrap" v-cloak>
                    <div class="layui-form layui-card-body" lay-filter="editMenuForm">
                        <div class="info-basic">
                            <div class="layui-form-item">
                                <label class="layui-form-label required">菜单名称</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" name="menuName" lay-verify="required"
                                           lay-verType="tips" value="" v-model="menuName">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label required">ICON</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input layui-text" name="aliasName" lay-verify="required"
                                           lay-verType="tips" value="" v-model="aliasName">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label required">映射页面</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" name="menuPage" lay-verify=""
                                           lay-verType="tips" value="" v-model="menuPage">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label required">是否显示</label>
                                <div class="layui-input-block">
                                    <template v-if="viewable">
                                        <input type="checkbox" value="true" lay-filter="viewable" name="viewable"
                                               lay-skin="switch"
                                               lay-text="显示|隐藏" checked>
                                    </template>
                                    <template v-else>
                                        <input type="checkbox" value="true" lay-filter="viewable" name="viewable"
                                               lay-skin="switch"
                                               lay-text="显示|隐藏">
                                    </template>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button style="width: 45%"
                                            class="layui-btn layui-btn-normal layui-btn-sm info-item-form-submit"
                                            lay-submit lay-filter="saveMenuBtn">
                                        保存
                                    </button>

                                    <button style="width: 45%"
                                            class="layui-btn layui-btn-normal layui-btn-sm info-item-form-submit"
                                            lay-submit lay-filter="delCustom">
                                        删除
                                    </button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<div style="display: none;" id="menuFormTmp" v-cloak>
    <div class="layui-form layui-card-body" id="menuForm" lay-filter="menuForm">
        <div class="info-basic">
            <div class="layui-form-item">
                <label class="layui-form-label required">菜单名称</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="menuName" lay-verify="required"
                           lay-verType="tips" value="" v-model="menuName">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">ICON</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input layui-text" name="aliasName" lay-verify="required"
                           lay-verType="tips" value="" v-model="aliasName">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">映射页面</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="menuPage" lay-verify=""
                           lay-verType="tips" value="" v-model="menuPage">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label required">是否显示</label>
                <div class="layui-input-block">
                    <template v-if="viewable">

                        <input type="checkbox" value="true" lay-filter="viewable" name="viewable" lay-skin="switch"
                               lay-text="显示|隐藏" checked>
                    </template>
                    <template v-else>
                        <input type="checkbox" value="true" lay-filter="viewable" name="viewable" lay-skin="switch"
                               lay-text="显示|隐藏">
                    </template>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-sm info-item-form-submit"
                            lay-submit lay-filter="addMenuBtn">
                        确认新建
                    </button>
                </div>
            </div>
        </div>

    </div>
</div>

<script src="../../../layuiadmin/layui/layui.js"></script>
<script src="../../../layuiadmin/lib/juicer-min.js"></script>
<script src="https://gcore.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    layui.config({
        base: '../../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'menus', 'table', 'setter', 'code', 'auth', 'treeMenu', 'layer', 'transfer'], function () {
        var $ = layui.$
            , form = layui.form
            , menus = layui.menus
            , setter = layui.setter
            , table = layui.table
            , treeMenu = layui.treeMenu
            , transfer = layui.transfer
            , layer = layui.layer
            , tm = null
        ;

        var editFormData = {
            id: null
            , menuName: null
            , menuPage: null
            , aliasName: null
            , viewable: true
        }

        var menuVue = new Vue({
            el: '#menuFormWrap',
            data: editFormData,
            updated: function () {
                form.render("select", 'editMenuForm');
            }
        })

        function renderFeatureTransfer(currentNode, notUsed, exists) {
            //初始化渲染穿梭框
            var showData = [];
            var choosedData = [];

            var chooseList = notUsed.concat(exists);
            $.each(chooseList, function (index, item) {
                var curr = {
                    value: item.id
                    , title: item.featureAlias
                    , disabled: false
                    , checked: false
                }
                showData.push(curr);
            })

            $.each(exists, function (index, item) {
                choosedData.push(item.id);
            })

            transfer.render({
                elem: '#transferBox'  //绑定元素
                , title: ['可选功能', '已选功能']
                , width: "40%"
                , showSearch: true
                , data: showData
                , value: choosedData
                , id: 'transferBox' //定义索引
                , onchange: function (data, index) {
                }
            });

            //绑定保存按钮
            var updating = true;
            $("#updateFeature").off("click").on("click", function () {
                var choosedFeatures = transfer.getData("transferBox");
                var featureIds = [];
                $.each(choosedFeatures, function (index, item) {
                    featureIds.push(item.value);
                })
                // return;
                var msg = $("#updateFeature").text();
                var updateMsg = "正在保存...";
                $("#updateFeature")
                    .text(updateMsg)
                    .addClass("layui-btn-disabled");
                if (!updating) {
                    return;
                }
                updating = false;

                menus.methods.updateUsed(currentNode.id, featureIds)
                    .always(function () {
                        $("#updateFeature")
                            .text(msg)
                            .removeClass("layui-btn-disabled");
                        updating = true;
                    })
                    .done(function (res) {
                        var code = res.code;
                        if (code == "200") {
                            layer.msg("保存成功", {icon: 1});
                        } else {
                            layer.alert("保存失败", {icon: 1});
                        }
                    });
            })
        }

        function renderMenuForm(node) {
            $("#featureMenuBox").show();

            form.render('checkbox');

            //回显属性
            editFormData.id = node.id;
            editFormData.menuName = node.menuName;
            editFormData.menuPage = node.menuPage;
            editFormData.aliasName = node.aliasName;

            //更新菜单
            form.on('submit(saveMenuBtn)', function (data) {
                var toUpdateMenu = data.field;
                if (!toUpdateMenu.viewable) {
                    toUpdateMenu.viewable = false;
                }
                toUpdateMenu.id = node.id;
                var loadIndex = layer.load(2);
                menus.methods.update(toUpdateMenu)
                    .always(function () {
                        layer.close(loadIndex);
                    })
                    .done(function (res) {
                        layer.msg("保存成功", {icon: 1})
                        node.name = editFormData.menuName;
                        node.menuName = toUpdateMenu.menuName;
                        node.aliasName = toUpdateMenu.aliasName;
                        node.menuPage = toUpdateMenu.menuPage;
                        node.viewable = toUpdateMenu.viewable;
                        tm.updateNode(node);
                    })
                return false;
            });

            //删除菜单
            form.on('submit(delCustom)', function (data) {
                var id = node.id;
                if (!id) {
                    return;
                }

                layer.confirm("删除后不可恢复，您确定要删除该菜单?", {icon: 0}, function (index) {
                    var loadIndex = layer.load(2);
                    menus.methods.del(id)
                        .always(function () {
                            layer.close(loadIndex);
                            layer.close(index);
                        })
                        .done(function (res) {
                            var code = res.code;
                            if (code == "200") {
                                layer.msg("删除成功", {icon: 1});
                                $("#featureMenuBox").hide();
                                tm.delNode(node);
                            } else {
                                layer.msg("删除失败", {icon: 2});
                            }
                        })
                })
                return false;
            });

            //显示待添加功能列表
            var loadIndex = layer.load(2);
            $.when(menus.methods.notUsedFeatures()
                , menus.methods.usedFeatures(node.id))
                .always(function () {
                    layer.close(loadIndex);
                })
                .done(function (allResp, belongResp) {
                    var allList = allResp[0].data;
                    var belongList = belongResp[0].data;
                    renderFeatureTransfer(node, allList, belongList);

                })
        }

        function renderTreeTable(data) {
            $.each(data, function (index, item) {
                item.name = item.menuName;
            })
            tm = treeMenu.customRender({
                elem: "#menuTree"
                , nodes: data
                , edit: {
                    showToolBar: false
                    , remove: false
                }
                , treeConfig: {
                    data: {
                        simpleData: {
                            enable: true
                            , pIdKey: "parentId"
                        }
                    }
                    , edit: {
                        drag: {
                            autoExpandTrigger: true,
                            prev: true,
                            inner: true,
                            next: true
                        }

                    }
                }
            })

            tm.on("afterDrag", function (params) {
                var all = tm.getAllNodes();
                var dragMenu = [];
                $.each(all, function (index, item) {
                    dragMenu.push({
                        id: item.id
                        , seq: item.getIndex()
                        , parentId: item.parentId
                    })
                })
                menus.methods.drag(dragMenu);
            })

            //菜单被选中回调
            tm.on("select", function (node) {
                renderMenuForm(node);
            })

        }


        var loadIndex = layer.load(2);
        menus.methods.all()
            .always(function () {
                layer.close(loadIndex);
                $("#addCustomMenu").removeClass("layui-btn-disabled");
                $("#addCustomMenu").on("click", function () {
                    addCustomMenu();
                })
            }).done(function (res) {
            var data = res.data;
            renderTreeTable(data);
        })


        //使用VUE绑定新建菜单
        var addFormData = {
            menuName: null
            , menuPage: null
            , aliasName: null
            , viewable: true
            , seq: 0
        }

        var menuVue = new Vue({
            el: '#menuFormTmp',
            data: addFormData
        })

        //新建自定义菜单
        function addCustomMenu() {
            layer.open({
                title: "新建管理菜单"
                , type: 1
                , area: ["80%", '80%']
                , content: $("#menuFormTmp")
                , success: function (layero, index) {
                    //新建菜单
                    form.render();
                    form.on('submit(addMenuBtn)', function (data) {
                        var newMenu = data.field;
                        var currentNode = tm.add(null, newMenu.menuName, newMenu);
                        if (!newMenu.viewable) {
                            newMenu.viewable = false;
                        }

                        newMenu.seq = currentNode.getIndex();

                        var loadIndex = layer.load(2);
                        menus.methods.add(newMenu)
                            .always(function () {
                                layer.close(loadIndex)
                            }).done(function (res) {
                            var data = res.data;
                            currentNode.id = data.id;
                            currentNode.menuName = data.menuName;
                            currentNode.aliasName = data.aliasName;
                            currentNode.menuPage = data.menuPage;
                            currentNode.viewable = data.viewable;
                            layer.close(index);
                            tm.onSelect("select", "", currentNode);

                            addFormData.menuName = null;
                            addFormData.menuPage = null;
                            addFormData.viewable = true;
                            addFormData.seq = 0;
                        }).fail(function () {
                            tm.delNode(currentNode);
                        })
                        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                    });
                }

            })
        }


    })
    ;
</script>
</body>
</html>
